<template>
    <div class="area-table">
      <div class="area-head">
        <p class="col1 head-col1">地区</p>
        <p class="col2 head-col2">确诊</p>
        <p class="col3 head-col3">死亡</p>
        <p class="col4 head-col4">治愈</p>
      </div>
      <div class="city-row" v-for="(item,index) in provData" :key="index">
        <div class="row" @click="toggle(index)">
          <p class="col1 "><img  :class="{open:showCity==index&&open==true,close:showCity!=index||open==false,hidden:item.children.length==0&&item.comment==''}" src="../../assets/image/point.png" alt="">{{item.name}}</p>
          <p class="col2 ">{{item.confirmed==0?"":item.confirmed}}</p>
          <p class="col3 ">{{item.dead==0?"":item.dead}}</p>
          <p class="col4 ">{{item.cured==0?"":item.cured}}</p>
        </div>
        <div v-show="showCity==index&&open==true" class="row-1" v-for="(city,key) in item.children" :key="key">
          <p class="col1 ">{{city.name}}</p>
          <p class="col2 ">{{city.confirmed==0?"":city.confirmed}}</p>
          <p class="col3 ">{{city.dead==0?"":city.dead}}</p>
          <p class="col4 ">{{city.cured==0?"":city.cured}}</p>
        </div>
       <div  v-if="item.comment!=''"  v-show="showCity==index&&open==true" class="row-1 tip">
         <p class="comment">{{item.comment}}</p>
       </div>
      </div>
      <div class="hint">疑似病例数来自国家卫健委数据，目前为全国数据，未分省市自治区等</div>
    </div>
</template>

<script>
    export default {
        name: "AreaTable",
      data()
      {
        return {
          provData:window.provData,
          showCity:0,
          open:true
        }
      },
      methods:{
        toggle(index){
          if(this.provData[index].children==0&&this.provData[index].comment==''){
            return;
          }
          console.log(this.showCity,index);
          if(this.showCity==index){
            this.showCity=index;
            this.open=!this.open;
          }else{
            this.showCity=index;
            this.open=true;
          }
        }
      }
    }
</script>

<style lang="scss">
  .area-table{
    background: white;
    padding: .12rem .16rem .16rem;
  }
  .col1{
    flex: 4;
  }
  .col2{
    flex: 2.6;
  }
  .col3{
    flex: 2.6;
  }
  .col4{
    flex: 2.6;
  }
.area-head{
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  width: 100%;
  p{
    &:last-child{
      border-right: none;
    }
    text-align: center;
    height: .32rem;
    line-height: .32rem;
    font-weight: bold;
    border-right: .005rem solid #fff;
  }
  .head-col1{
    background: #e3e7f3;
  }
  .head-col2{
    background: #f3bab0;
  }
  .head-col3{
    background: #b4c0d5;
  }
  .head-col4{
    background: #6c9;
  }
}
  .row{
    display: flex;
    flex-direction: row;
    background: #f7f7f7;
    border-bottom: .005rem solid #ebebeb;
    p{
      &:first-child{
        text-align: left;
        .open{
          transform: rotate(0);
        }
        .close{
          transform: rotate(-90deg);
        }
        .hidden{
          visibility: hidden;
        }
        img{
          position: relative;
          top: -.02rem;
          width: .08rem;
          height: .06rem;
          margin: 0 .07rem 0 .11rem;
          transition: all .2s;
        }
      }
      &:last-child{
        border-right: none;
      }
      text-align: center;
      height: .32rem;
      line-height: .32rem;
      font-weight: bold;
      border-right: .005rem solid #fff;
    }
  }
  .row-1{
    padding-top: .05rem;
    padding-bottom: .05rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: flex-start;
    border-bottom: .005rem solid #ebebeb;
    .comment{
      color:#999;
      font-weight: bold;
    }
    p{
      &:first-child{

        text-align: left;
        margin-left: .52rem;
        margin-right: -.52rem;
      }
       text-align: center;
    }
    &.tip{
      justify-content: flex-start;
      p{
        flex: 1;
        margin: 0;
        text-align: center;
      }
    }
  }
  .hint{
    margin-top: .08rem;
    color: #999;
    font-size: .12rem;
    line-height: .18rem;
  }
</style>
